<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    #block {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 100px;
      top: 100px;
      background-color: blue;
    }
  </style>
  <!--<script src="web-animations.min.js"></script>-->
</head>
<body>
  <button id="startBtn">开始</button>
  <button id="finishBtn">停止</button>
  <button id="cancelBtn">取消</button>
  <button id="pauseBtn">暂停</button>
  <button id="playBtn">继续</button>
  <button id="reverseBtn">反转</button>
  <div id = "block"/>
  <script>
    const frames = [
      {left: '50px'},
      {left: '100px', offset: 0.5},
      {left: '200px'},
    ];
    const timing = {
      duration: 2000,
      fill: 'both',
      direction: 'reverse',
      playbackRate: 1.0,
      iterations: 1,
      delay: 500,
      endDelay: 1000,
      easing: 'ease-in',
      iterations: 3,
      //easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      //easing: 'step-end'
    }
    let anim
    startBtn.onclick = function(){
      block.style.backgroundColor = 'green'
      anim = block.animate(frames, timing)
      
      // anim.finished.then(function(){
      //   console.log('finished!!')
      // })

      anim.onfinish = function(){
        console.log('finished')
        block.style.backgroundColor = 'red'
      }
    }

    finishBtn.onclick = function(){
      anim && anim.finish()
    }

    cancelBtn.onclick = function(){
      anim && anim.cancel()
    }

    playBtn.onclick = function(){
      anim && anim.play()
    }

    pauseBtn.onclick = function(){
      anim && anim.pause()
    }

    reverseBtn.onclick = function() {
      anim && anim.reverse()
    }
  </script>
</body>
</html>